<template>
  <div class="top">
    <div class="left">
      <img alt="" :src="'/api'+userinfo.avatar_url">
    </div>
    <div class="right">
      <p>
        <span>用户名：</span>
        <span>{{ userinfo.username }}</span>
      </p>
      <p>
        <span>注册时间：</span>
        <span>{{ userinfo.date_joined }}</span>
      </p>
      <p>
        <span>上次登录时间：</span>
        <span>{{ userinfo.last_login }}</span>
      </p>
      <p>
        <span>来源渠道：</span>
        <span>用户名注册</span>
      </p>
      <p>
        <span>账号状态：</span>
        <span>正常</span>
      </p>
      <p>
        <span>邮箱：</span>
        <span>{{ userinfo.email }}</span>
      </p>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "Top",
  computed: {
    ...mapState(['userinfo'])
  }
}
</script>

<style scoped lang="less">
.top {
  height: 130px;
  width: calc(100% - 40px);
  background-color: white;
  display: flex;

  > .left {
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      height: 70%;
      border-radius: 50%;
    }
  }

  > .right {
    width: 75%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;

    p {
      display: block;
      width: 50%;

      span:first-child {
        font-weight: bold;
      }
    }
  }
}
</style>